<template>
  <div class="content f-c">
    <el-form inline>
      <el-form-item label="地区">
        <el-input v-model="searchParams.regionCodes" clearable placeholder="" />
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" style="margin-left: 15px" @click="onSearch">搜索</el-button>
      </el-form-item>
      <el-form-item />
    </el-form>
    <div class="line" />
    <div class="button-list2 f-r a-c" style="margin-bottom: 20px">
      <el-button plain type="primary" @click="onAdd">添加</el-button>
      <el-button plain type="warning">导入</el-button>
    </div>
    <div class="table-box">
      <el-table
        v-loading="loading"
        height="100%"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="index" align="center" label="序号" />
        <el-table-column prop="address" label="地区" align="center" />
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column prop="updateTime" label="更新日期" align="center" />
        <el-table-column prop="statusName" label="状态" align="center" />
        <el-table-column label="操作" fixed="right" width="180px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="onEdit(scope.row)"
            >编辑 </el-button>
            <el-button
              v-if="scope.row.status == 0"
              type="text"
              @click="onUpdateStatus(scope.row, '1')"
            >停用</el-button>
            <el-button
              v-if="scope.row.status == 1"
              type="text"
              @click="onUpdateStatus(scope.row, '0')"
            >启用</el-button>
            <el-button
              type="text"
              @click="onUpdateStatus(scope.row, null)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>
    <el-drawer
      title="添加/编辑"
      :visible.sync="drawer"
      direction="rtl"
      size="456px"
    >
      <div class="drawer-content">
        <el-form ref="formRef" label-position="top" :model="ruleForm" :rules="rules">
          <el-form-item prop="pointName" label="名称">
            <el-input v-model="ruleForm.pointName" clearable />
          </el-form-item>
          <el-form-item label="地区">
            <el-select v-model="ruleForm.regionCode" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="xaxis" label="经度">
            <el-input v-model="ruleForm.xaxis" clearable />
          </el-form-item>
          <el-form-item prop="yaxis" label="纬度">
            <el-input v-model="ruleForm.yaxis" clearable />
          </el-form-item>
          <el-form-item prop="name" label="省土种名">
            <el-input v-model="ruleForm.name" clearable />
          </el-form-item>
          <el-form-item prop="code" label="省土种代码">
            <el-input v-model="ruleForm.code" clearable />
          </el-form-item>
          <el-form-item prop="landformType" label="地貌类型">
            <el-input v-model="ruleForm.landformType" clearable />
          </el-form-item>
          <el-form-item prop="useType" label="利用类型">
            <el-input v-model="ruleForm.useType" clearable />
          </el-form-item>
          <div>理化属性</div>
          <el-form-item prop="ph" label="pH">
            <el-input v-model="ruleForm.ph" clearable />
          </el-form-item>
          <el-form-item prop="organicMatter" label="有机质">
            <el-input v-model="ruleForm.organicMatter" clearable />
          </el-form-item>
          <el-form-item prop="nitrogen" label="水解性氮">
            <el-input v-model="ruleForm.nitrogen" clearable />
          </el-form-item>
          <el-form-item prop="phosphorus" label="有效磷">
            <el-input v-model="ruleForm.phosphorus" clearable />
          </el-form-item>
          <el-form-item prop="potassium" label="速效钾">
            <el-input v-model="ruleForm.potassium" clearable />
          </el-form-item>
          <el-form-item prop="cation" label="阳离子交换量（CEC）">
            <el-input v-model="ruleForm.cation" clearable />
          </el-form-item>
          <el-form-item prop="arsenic" label="砷">
            <el-input v-model="ruleForm.arsenic" clearable />
          </el-form-item>
          <el-form-item prop="pb" label="铅">
            <el-input v-model="ruleForm.pb" clearable />
          </el-form-item>
          <el-form-item prop="mercury" label="汞">
            <el-input v-model="ruleForm.mercury" clearable />
          </el-form-item>
          <el-form-item prop="chromium" label="铬">
            <el-input v-model="ruleForm.chromium" clearable />
          </el-form-item>
          <el-form-item prop="cadmium" label="镉">
            <el-input v-model="ruleForm.cadmium" clearable />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="drawer = false">取 消</el-button>
          <el-button type="primary" @click="onSave">提 交</el-button>
        </span>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import crud from '@/mixins/crud';
import { http_land } from '@/api';

export default {
  name: 'Index',
  mixins: [crud],
  data() {
    return {
      request: http_land,
      drawer: false,
      searchParams: {
        regionCodes: ''
      },
      options: [

      ],
      ruleForm: {
        id: undefined,
        pointName: '',
        xaxis: '',
        yaxis: '',
        address: '',
        regionCode: '',
        name: '',
        code: '',
        landformType: '',
        useType: '',
        ph: '',
        organicMatter: '',
        nitrogen: '',
        phosphorus: '',
        potassium: '',
        cation: '',
        arsenic: '',
        pb: '',
        mercury: '',
        chromium: '',
        cadmium: ''
      },
      resetForm: {
        id: undefined,
        pointName: '',
        xaxis: '',
        yaxis: '',
        address: '',
        regionCode: '',
        name: '',
        code: '',
        landformType: '',
        useType: '',
        ph: '',
        organicMatter: '',
        nitrogen: '',
        phosphorus: '',
        potassium: '',
        cation: '',
        arsenic: '',
        pb: '',
        mercury: '',
        chromium: '',
        cadmium: ''
      },
      rules: {}
    }
  },
  methods: {
    formatTableData(data) {
      data.forEach(el => {
        if (el.status == 0) {
          el.statusName = '正常'
        } else if (el.status == 1) {
          el.statusName = '停用'
        }
      })
    },
    onUpdateStatus(item, value) {
      http_land.deleteOne({
        id: item.id,
        status: value
      }).then(res => {
        this.$message.success(res.msg)
        this.onSearch()
      })
    },
    onAdd() {
      this.ruleForm = {
        ...this.resetForm
      }
      this.drawer = true
    },
    onEdit(row) {
      http_land.read(row.id).then(res => {
        for (const ruleFormKey in this.ruleForm) {
          this.ruleForm[ruleFormKey] = res.data[ruleFormKey]
        }
      })
      this.drawer = true
    },
    onSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          http_land.create(this.ruleForm).then(res => {
            this.$message.success(res.msg)
            this.onClose()
            this.onSearch()
          })
        }
      })
    },
    onClose() {
      this.drawer = false
    }
  }
}
</script>

<style scoped lang="scss">
.content{
  height: 100%;
  padding-top: 0 !important;
}

</style>
